<template>
    <div class="review-list">
      <el-timeline v-if="reviews.length">
        <el-timeline-item
          v-for="review in reviews"
          :key="review.id"
          :timestamp="review.reviewTime"
          placement="top"
        >
          <el-card shadow="hover">
            <div class="review-header">
              <el-avatar :src="review.userAvatar" size="small">
                <!-- 默认展示用户名字的首字母，如果没有头像 -->
                <!-- <template #default>{{ review.userName ? review.userName.charAt(0) : 'A' }}</template> -->
              </el-avatar>
              <span class="review-username">{{ review.userName || '匿名用户' }}</span>
              <el-rate v-model="review.userRating" :disabled="true" small />
            </div>
            <p v-if="review.comment">{{ review.comment }}</p>
            <p v-else><i>未提供评论内容。</i></p>
            <div class="review-images" v-if="review.images && review.images.length && review.images[0].id != null">
              <el-image
                v-for="(image, index) in review.images"
                :key="index"
                :src="image.imageUrl || ''"
                style="width: 100px; height: 100px; margin: 5px"
                fit="cover"
                :alt="'图片 ' + (index + 1)"
              />
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <div v-else class="no-reviews">
        <p>当前餐厅暂无评论。</p>
      </div>
      <el-pagination
        v-if="totalRecords > 0"
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :total="totalRecords"
        layout="prev, pager, next"
        @current-change="fetchReviews"
      />
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, defineProps } from 'vue';
  import axios from 'axios';
  import { ElMessage } from 'element-plus';
  
  const props = defineProps({
    restaurantId: String,
  });
  
  interface ReviewImage {
    id: number | null;
    reviewId: number;
    imageUrl: string | null;
  }
  
  interface Review {
    id: number;
    restaurantId: number;
    userId: number;
    userName: string | null;
    userAvatar: string | null;
    userRating: number;
    reviewTime: string;
    comment: string | null;
    images: ReviewImage[];
  }
  
  const reviews = ref<Review[]>([]);
  const currentPage = ref(1);
  const pageSize = ref(10);
  const totalRecords = ref(0);
  
  const fetchReviews = async () => {
    try {
       
        
      const response = await axios.get(`/api/restaurants/review/${props.restaurantId}`, {
        params: {
          pageNum: currentPage.value,
          pageSize: pageSize.value,
        },
      });
      
      if (response.data.code === 200) {
        const data = response.data.data;
        reviews.value = data.listData || [];
        totalRecords.value = data.totalRecords || 0;
  
        // 如果没有评论，可以显示一条信息（可选）
        if (reviews.value.length === 0) {
          ElMessage.info('当前餐厅暂无评论。');
        }
      } else {
        ElMessage.error('加载评论失败。');
      }
    } catch (error) {
      ElMessage.error('加载评论时发生错误，请稍后重试。');
      console.error('Error fetching reviews:', error);
    }
  };
  
  onMounted(fetchReviews);
  </script>
  
  <style scoped>
  .review-list {
    padding: 20px;
  }
  
  .review-header {
    display: flex;
    align-items: center;
  }
  
  .review-username {
    margin-left: 10px;
    font-weight: bold;
  }
  
  .review-images {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  
  .no-reviews {
    text-align: center;
    color: #888;
    padding: 20px;
    font-style: italic;
  }
  </style>
  